<template>
	<cl-crud ref="crud" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key />
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table v-bind="table"></cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="upsert" v-bind="upsert"></cl-upsert>
	</cl-crud>
</template>

<script>
export default {
	data() {
		return {
			// 新增、编辑配置
			upsert: {
				items: [
					{
						label: "标题",
						prop: "title",
						component: {
							name: "el-input"
						},
						rules: {
							required: true,
							message: "标题不能为空"
						}
					},
					{
						label: "作者",
						prop: "author",
						component: {
							name: "el-input"
						},
						rules: {
							required: true,
							message: "作者不能为空"
						}
					},
					{
						label: "是否头条",
						prop: "is_top",
						component: {
							name: "el-switch"
						}
					},
					{
						label: "缩略图",
						prop: "avatar",
						component: {
							name: "cl-upload"
						}
					},
					{
						label: "内容",
						prop: "content",
						component: {
							name: "cl-editor-quill",
							attrs: {
								height: "300"
							}
						},
						rules: {
							required: true,
							message: "内容不能为空"
						}
					}
				]
			},
			// 表格配置
			table: {
				columns: [
					{
						type: "selection",
						align: "center",
						width: 60
					},
					{
						label: "标题",
						prop: "title",
						align: "center",
						"min-width": 120
					},
					{
						label: "操作",
						align: "center",
						type: "op"
					}
				]
			}
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.news.articles).done();
			app.refresh();
		}
	},
	created() {
		console.log(this.$service);
	}
};
</script>
